<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div class="white-bg">
	<div align="center">
		<div class="main-content">
			<form id="form-role-edit">
				<input id="roleId" name="roleId" type="hidden"/>
				<table class="table table-striped table-bordered table-td">
			        <tbody>
			        	<tr>
		                	<td>
			                	<label class="is-required">角色名称：</label>
			                </td>
			                <td>
		                		<input id="roleName" name="roleName" class="easyui-textbox" style="width:350px;" data-options="prompt:'请输入角色名称',validType:['length[1,30]'],readonly:true" type="text">
			                </td>
		                </tr>
			            <tr>
			                <td>
			                	<label class="is-required">权限字符：</label>
		                	</td>
			                <td>
	                	 		<input id="roleKey" name="roleKey" class="easyui-textbox" style="width:350px;" data-options="prompt:'请输入权限字符',validType:['length[1,60]'],readonly:true" type="text">
			                </td>
			            </tr>
			            <tr>
			                <td>
			                	<label class="is-required">数据范围：</label>
		                	</td>
			                <td>
	                	 		<select id="dataScope" class="easyui-combobox" name="dataScope" data-options="editable:false" style="width:350px;">
									<option value="1">全部数据权限</option>
									<option value="2">自定数据权限</option>
									<option value="3">本部门数据权限</option>
									<option value="4">本部门及以下数据权限</option>
									<option value="5">仅本人数据权限</option>
								</select>
								<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 特殊情况下，设置为“自定数据权限”</span>
			                </td>
		                </tr>
			            <tr id="authDataScope" th:style="'display:' + @{(*{dataScope=='2'} ? '' : 'none')} + ''">
			                <td>
			                	<label>数据权限：</label>
		                	</td>
			                <td>
	                	 		<label class="check-box"><input type="checkbox" value="1">展开/折叠</label>
							    <label class="check-box"><input type="checkbox" value="2">全选/全不选</label>
							    <label class="check-box"><input type="checkbox" value="3" checked>父子联动</label>
							    <div id="deptTrees" class="ztree ztree-border"></div>
			                </td>
			            </tr>
				 	</tbody>
			    </table>
			    <div id="dlg-buttons">
			    	<a class="easyui-linkbutton" iconCls="icon-save" onclick="submitHandler()">保存</a>
                    <a class="easyui-linkbutton" iconCls="icon-cancel" onclick="$.easyUIModal.close()">关闭</a>
		    	</div>
		    </form>
		</div>
	</div>
</div>
<script th:inline="javascript">
	var role = [[${role}]];
	$('#form-role-edit').form('load', role);
	$(function() {
		var url = ctx + "system/dept/roleDeptTreeData?roleId=" + $("#roleId").val();
		var options = {
			id: "deptTrees",
	        url: url,
	        check: { enable: true, nocheckInherit: true, chkboxType: { "Y": "ps", "N": "ps" } },
	        expandLevel: 2
	    };
		$.tree.init(options);
	});
	
	$('.check-box [type="checkbox"]').each(function(index, element) {
		$(this).click(function(){
			if(this.value == 1){
				if(this.checked == true){
					$._tree.expandAll(true);
	            } else {
	            	$._tree.expandAll(false);
	            }
			} else if(this.value == 2){
				if(this.checked == true){
					$._tree.checkAllNodes(true);
	            } else {
	            	$._tree.checkAllNodes(false);
	            }
			} else if(this.value == 3){
				if(this.checked == true){
					$._tree.setting.check.chkboxType = { "Y": "ps", "N": "ps" };
	            } else {
	            	$._tree.setting.check.chkboxType = { "Y": "", "N": "" };
	            }
			}
    	});
	});
	
	$("#dataScope").combobox({
		onChange: function (newValue, oldValue) {
	    	dataScopeVisible(newValue);
		}
	});
	
	function dataScopeVisible(dataScope) {
		if (dataScope == 2) {
    		$("#authDataScope").show();
    	} else {
    		$._tree.checkAllNodes(false);
    		$("#authDataScope").hide();
    	}
	}
	
	function submitHandler() {
		if($("#form-role-edit").form('validate')){
			var roleId = $("#roleId").val();
			var roleName = $("#roleName").textbox("getValue");
			var roleKey = $("#roleKey").textbox("getValue");
			var dataScope = $("#dataScope").combobox("getValue");
			var deptIds = $.tree.getCheckedNodes();
			$.ajax({
				cache : true,
				type : "POST",
				url : ctx + "system/role/authDataScope",
				data : {
					"roleId": roleId,
					"roleName": roleName,
					"roleKey": roleKey,
					"dataScope": dataScope,
			        "deptIds": deptIds
				},
				async : false,
				error : function(request) {
					$.messager.alert("提示", "系统错误", 'error');
				},
				success : function(data) {
					$.easyUIOperate.successCallback(data);
				}
			});
		}
	}
</script>